// 导入路由对象与vuex对象
import router from '@/router'
import store from '@/store'

// 导入Nprogress进度条
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 开启进度条效果: Nprogress.start()
// 关闭进度条效果: Nprogress.done()

const whiteList = ['/login', '/404']

// 设置路由前置守卫
// to: 要去哪个组件
// from:从哪个组件来
// next:函数  next()放行  next(false) 不跳   next(路径)

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  // 获取token
  const token = store.getters.token
  // 判断是否有token
  if (token) {
    //   有token
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // this.$store.dispatch('模块名/方法名')
      // 在这里获取用户信息
      // 判断用户是否已经存在信息了,如果存在,不再获取,如果不存在,获取用户信息
      if (!store.state.user.userInfo.userId) {
        const { roles: { menus }} = await store.dispatch('user/getUserInfo')
        // console.log(menus) // menus就是路由对应的关系

        // 1.根据menus筛选对应的路由
        // 2.将筛选的路由再添加到路由规则中?怎么添加 router.addRoutes([{path:xxx,component:xxx},{}])
        // 建议修改路由的业务逻辑都放在vuex中
        const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
        // console.log(router)

        // 3.临时添加所有的动态路由,测试router.addRoutes()
        // router.addRoutes(asyncRoutes) // 动态添加路由是异步的
        router.addRoutes([
          ...otherRoutes,
          { path: '*', redirect: '/404', hidden: true }
        ])

        next({
          ...to,
          replace: true // 重进一次, 不保留重复历史
        })
      }

      next()
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 有路径的跳转,不会进入到后置守卫中

// 设置路由后置守卫
router.afterEach((to, from) => {
  setTimeout(function() {
    NProgress.done()
  }, 500)
})
